<template>
  

{{ keyword }}
<!-- 商品列表区域 -->
    <div class="index-content">
      <div class="index-short" v-for="item in clothesList">
        <div class="index-short-info">
          <!-- 商品图片（优化占位样式） -->
          <div class="index-short-img">
            <img src="https://picsum.photos/80/80" alt="商品图片" class="goods-img">
          </div>
          
          <!-- 商品文本信息 -->
          <div class="index-short-text">
            <h3 class="goods-name">{{ item.clothesName }}</h3>
            <p class="goods-desc">{{ item.description }}</p>
            <p class="goods-price">¥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>

</template>
<script setup>
  import { onMounted, ref,watch } from 'vue';
  import { useRoute } from 'vue-router';
  import axios from 'axios'
  const route = useRoute();
  const keyword = ref('')
  const clothesList = ref([])

  onMounted( () => {
    keyword.value = route.params.keyword; 
  })

  watch(
  // 监听路由的 query 对象（deep: true 监听对象内部属性变化）
  () => route.params.keyword,
  async (newQuery, oldQuery) => {
    if (newQuery !== oldQuery) {
      keyword.value = newQuery;
      const response = await axios.get('/api/clothes/getClothesByName/'+keyword.value);
    const data = response.data;
    clothesList.value = response.data.data
    console.log(data);  
    console.log(clothesList.value);
    }
  },
  { deep: true, immediate: true } // immediate: true 页面初始化时执行一次
);
</script>


<style scoped>
  /* 商品列表容器样式 */
.index-content {
  width: 90%;
  margin: 0 auto;
  /* display: flex; */
  /* flex-wrap: wrap; */
  gap: 20px; /* 替代margin，间距更均匀 */
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 商品卡片样式 */
.index-short {
  flex: 1 1 calc(25% - 20px); /* 弹性布局，支持自适应 */
  min-width: 240px; /* 最小宽度，避免过窄 */
  background-color: #fff;
  border: 1px solid #e5e7eb; /* 浅灰色边框，更柔和 */
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease; /* 过渡动画，提升交互体验 */
}

/* 卡片hover效果 */
.index-short:hover {
  transform: translateY(-3px); /* 轻微上浮 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* 增强阴影 */
  border-color: #4299e1; /* 边框变色，突出选中态 */
}

/* 商品卡片内部布局 */
.index-short-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

/* 商品图片容器 */
.index-short-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f5f5f5; /* 图片占位背景 */
  flex-shrink: 0; /* 避免图片容器被挤压 */
}

.goods-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应，不拉伸 */
}

/* 商品文本样式优化 */
.index-short-text {
  flex: 1; /* 文本区域占满剩余空间 */
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.6; /* 优化行高，提升可读性 */
}

.goods-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 最多显示1行，超出省略（可调整） */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-desc {
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 最多显示1行，超出省略 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-price {
  font-size: 1rem;
  font-weight: 600;
  color: #e53e3e; /* 价格红色，突出显示 */
}

/* 响应式适配：平板（768px以下） */
@media (max-width: 768px) {
  .index-short {
    flex: 1 1 calc(50% - 15px); /* 两列布局 */
    min-width: 200px;
  }

  .index-content {
    width: 95%;
    padding: 15px;
    gap: 15px;
  }

  .index-banner {
    width: 95%;
    margin-bottom: 20px;
  }

  .carousel-title {
    font-size: 1.25rem;
  }
}

/* 响应式适配：手机（480px以下） */
@media (max-width: 480px) {
  .index-short {
    flex: 1 1 100%; /* 单列布局 */
    min-width: unset;
  }

  .index-short-info {
    padding: 12px;
    gap: 10px;
  }

  .index-short-img {
    width: 60px;
    height: 60px;
  }

  .goods-name {
    font-size: 1rem;
  }

  .goods-desc {
    font-size: 0.85rem;
  }
}
</style>